<template>
  <div class="member-dashboard">
    <h2>会员中心</h2>

    <!-- 个人信息 -->
    <el-card class="member-info-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      <div class="member-info">
        <el-avatar :size="100" :src="baseUrl + memberInfo.avatar" />
        <div class="info-details">
          <p><strong>姓名：</strong>{{ memberInfo.name }}</p>
          <p><strong>手机号：</strong>{{ memberInfo.phone }}</p>
          <p><strong>邮箱：</strong>{{ memberInfo.email }}</p>
          <p><strong>性别：</strong>{{ memberInfo.sex }}</p>
          <p><strong>出生日期：</strong>{{ memberInfo.birthday }}</p>
        </div>
      </div>
    </el-card>

    <!-- 我的预约 -->
    <el-card class="reservations-card">
      <template #header>
        <div class="card-header">
          <span>我的预约</span>
          <el-button type="primary" @click="loadReservations">刷新</el-button>
        </div>
      </template>
      <el-table :data="reservations" stripe>
        <el-table-column prop="course.name" label="课程名称" />
        <el-table-column prop="course.coach" label="教练" />
        <el-table-column prop="course.startTime" label="上课时间" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0">待确认</el-tag>
            <el-tag type="success" v-else-if="scope.row.status === 1">已确认</el-tag>
            <el-tag type="danger" v-else>已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="cancelReservation(scope.row)"
                       :disabled="scope.row.status === 2">取消预约</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 课程预约 -->
    <el-card class="course-booking-card">
      <template #header>
        <div class="card-header">
          <span>课程预约</span>
        </div>
      </template>
      <el-form :model="bookingForm" label-width="100px">
        <el-form-item label="课程类型">
          <el-radio-group v-model="bookingForm.courseType">
            <el-radio :label="0">团课</el-radio>
            <el-radio :label="1">私课</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程ID">
          <el-input v-model="bookingForm.courseId" placeholder="请输入课程ID" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="bookCourse">预约课程</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/util/api'
import baseUrl from '@/util/constant'
import { ElMessage } from 'element-plus'

const memberInfo = ref({})
const reservations = ref([])
const bookingForm = ref({
  courseType: 0,
  courseId: ''
})

// 获取当前登录会员信息
async function loadMemberInfo() {
  try {
    const resp = await api({
      url: '/members/profile',
      method: 'get'
    })

    if (resp.success) {
      memberInfo.value = resp.data
    } else {
      ElMessage.error('获取个人信息失败')
    }
  } catch (error) {
    ElMessage.error('获取个人信息失败')
  }
}

// 加载预约信息
async function loadReservations() {
  try {
    const resp = await api({
      url: '/reservations/my',
      method: 'get'
    })

    if (resp.success) {
      reservations.value = resp.data
    } else {
      ElMessage.error('获取预约信息失败')
    }
  } catch (error) {
    ElMessage.error('获取预约信息失败')
  }
}

// 预约课程
async function bookCourse() {
  if (!bookingForm.value.courseId) {
    ElMessage.warning('请输入课程ID')
    return
  }

  try {
    const resp = await api({
      url: '/reservations/reserve',
      method: 'post',
      data: {
        memberId: memberInfo.value.id,
        courseId: parseInt(bookingForm.value.courseId),
        courseType: bookingForm.value.courseType,
        status: 0
      }
    })

    if (resp.success) {
      ElMessage.success('预约成功')
      loadReservations()
      bookingForm.value.courseId = ''
    } else {
      ElMessage.error(resp.msg || '预约失败')
    }
  } catch (error) {
    ElMessage.error('预约失败')
  }
}

// 取消预约
async function cancelReservation(row) {
  try {
    const resp = await api({
      url: `/reservations/cancel/${row.id}`,
      method: 'delete'
    })

    if (resp.success) {
      ElMessage.success('取消预约成功')
      loadReservations()
    } else {
      ElMessage.error(resp.msg || '取消预约失败')
    }
  } catch (error) {
    ElMessage.error('取消预约失败')
  }
}

onMounted(() => {
  loadMemberInfo()
  loadReservations()
})
</script>

<style scoped>
.member-dashboard {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.member-info {
  display: flex;
  gap: 30px;
  align-items: center;
}

.info-details p {
  margin: 10px 0;
}

.reservations-card, .course-booking-card {
  margin-top: 20px;
}
</style>
